<template>
  <div class="component">
    <app-header title="媒体舆情统计分析" :needBack="true">
      <template slot="right-btn">
        <div class="filter-btn" @click="doFilter">
          <i class="iconfont icon-filter"></i>
          筛选
        </div>
      </template>
    </app-header>
    <filter-view
      v-show="filterOpenState">
    </filter-view>
    <div class="analysis-block">
      <h3 class="analysis-block-title">媒体舆情数量统计</h3>
      <div class="count-content">
        <p class="count-title">主体报道总数</p>
        <p class="count-value">100</p>
        <p class="count-title">负面报道总数</p>
        <p class="count-value color-red">11</p>
      </div>
    </div>
    <div class="analysis-block">
      <h3 class="analysis-block-title">媒体舆情发展趋势</h3>
      <div class="chart chart01" ref="chart01"></div>
    </div>
    <div class="analysis-block">
      <h3 class="analysis-block-title">媒体舆情来源类型分布</h3>
      <div class="chart chart02" ref="chart02"></div>
    </div>
    <div class="analysis-block">
      <h3 class="analysis-block-title">媒体舆情来源站点分布(TOP10)</h3>
      <div class="chart chart03" ref="chart03"></div>
    </div>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
import FilterView from '@/components/common/FilterView'
import echarts from 'echarts'

export default {
  name: "",
  data() {
    return {
      filterOpenState: false,
    }
  },
  methods: {
    doFilter() {
      this.filterOpenState = !this.filterOpenState
    },
    renderChart01 () {
      const chart = echarts.init(this.$refs['chart01'])
      const option = {
        title: {
          text: '折线图堆叠',
          show: false
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
          },
          {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
          },
          {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
          },
          {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      chart.setOption(option)
    },
    renderChart02 () {
      const chart = echarts.init(this.$refs['chart02'])
      const option = {
        title : {
          text: '某站点用户访问来源',
          show: false,
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: 'left',
          data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '45%'],
            data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      chart.setOption(option)
    },
    renderChart03 () {

    }
  },
  mounted () {
    this.renderChart01()
    this.renderChart02()
    this.renderChart03()
  },
  components: {
    AppHeader,
    FilterView,
  }
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .analysis-block {
    width: 90%;
    margin: auto;
    margin-bottom: .3rem;
    font-size: .25rem;
    .analysis-block-title {
      color: #000;
    }
  }
  .count-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #000;
    .count-title {
      font-size: .3rem;
      margin-bottom: .1rem;
    }
    .count-value {
      font-size: .4rem;
      margin-bottom: .1rem;
    }
  }
  .chart {
    width: 100%;
    height: 60vh;
  }
</style>
